<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>值班计划新增</title>
		<link rel="stylesheet" href="../../js/plugins/layui-v2.4.5/layui/css/layui.css" />
		<link rel="stylesheet" href="../../css/reset.css" />
		<link rel="stylesheet" href="../../css/form.css" />
		<style>
			.plan_list{margin-top: 15px;width: 500px;}
			.plan_list .l-head{
				background: #eee;
				height: 35px;
				line-height: 35px;
			}
			.plan_list .l-head span,.plan_list li span{display: inline-block;text-align: center;}
			.plan_list .l-head span:nth-of-type(1),.plan_list li span:nth-of-type(1){
				width: 350px;
			}
			.plan_list .l-head span:nth-of-type(2),.plan_list li span:nth-of-type(2){
				width: 120px;
			}
			.plan_list li{
				padding: 5px 0;
				border-bottom: 1px dashed #ccc;
			}
			.del-btn{cursor:pointer;}
		</style>
	</head>
	<body class="p10">
		<div class="container p15">
			<div class="header">
				<h2>添加值班计划</h2>
			</div>
			<div class="content-scroll layui-form">
				<div class="layui-row ">
					<div class="layui-inline">
						<label class="layui-form-label">计划名称</label>
						<div class="layui-input-inline">
							<input type="text" name="" autocomplete="off" class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-row ">
					<div class="layui-inline">
						<label class="layui-form-label">计划周期</label>
						<div class="layui-input-inline">
							<input type="text" class="layui-input" id="test1"  autocomplete="off" placeholder=" ~ ">
						</div>
					</div>
				</div>
				<div class="layui-row ">
					<div class="">
						<a href="javascript:;" class="layui-btn  layui-btn-primary layui-btn-sm" id="plan_add"><i class="layui-icon layui-icon-add-1"></i>添加值班周期</a>
					</div>
					<div class="plan_list">
						<div class="l-head">
							<span>值班时间</span>
							<span>值班人员</span>
						</div>
						<ul id="planList">
						</ul>
					</div>
				</div>
				
				
				<div class="layui-row save-btns">
					<a href="javascript:;" class="layui-btn  layui-btn-normal">保存</a>
					<a href="javascript:;" class="layui-btn  layui-btn-primary">关闭</a>
				</div>
			</div>
		</div>

		<script src="../../js/jquery-3.3.1.min.js"></script>
		<script src="../../js/plugins/layui-v2.4.5/layui/layui.js"></script>
		<script>
			$(function(){
				var index = 0;
				layui.use(['form', 'laydate'], function() {
					var form = layui.form,laydate = layui.laydate;
					laydate.render({
						elem:'#test1',
						range:'~'
					})
					laydate.render({
						elem:'#test2',
						range:'~'
					})
					form.on('radio(position)',function(d){
						if(d.value == 'jifang'){
							$("#jfChecked").show().next().hide();
						}else{
							$("#qtChecked").show().prev().hide();
						}
					})
					//值班计划添加
					$("#plan_add").on('click',function(){
						var str = `<li><span class="layui-input-inline"><input type="text" class="layui-input" id="planTime${index}"  autocomplete="off" placeholder=" ~ "></span>
						<span>张强</span><i class="layui-icon layui-icon-close del-btn" onclick="del(this)"></i> </li>`;
						$("#planList").append(str);
						laydate.render({
						  elem: `#planTime${index}`
						  ,type: 'datetime'
						  ,range:'~'
						});
						index++;
					})
				})
				
			})
			//删除计划
			function del(obj){
				$(obj).parent().remove();
			}
		</script>
	</body>
</html>
